<template>
  <button class="but" @click="uploadFile">
    <img src="../assets/images/teacher/addCourse/upload.svg" alt="">
    上传文件
    <input multiple type="file" name="" style="display: none;" id="upload">
  </button>
  <button @click="showFiles" class="showFile">查看文件</button>
  <div class="tip">
    支持扩展名：.rar .zip .doc .docx .pdf .jpg...
  </div>
  <FilesList ref="fileListWin" :dialogVisible="dialogVisible" @close="close" />
</template>
<script setup lang="ts">
import { ref, defineEmits, defineProps, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { getUserData } from '../utils'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { file } from '@babel/types'
import FilesList from './FilesList.vue'

const emits = defineEmits([
  'getFileIdList'
]);

// 获得用户信息
// 获得用户信息
let userData = {
  Token: '',
  avatar: '',
  id: '',
  role: ''
}
if (getUserData() != undefined) {
  userData = getUserData();
}
console.log(userData);

const fileList = []

const fileListWin = ref()
// 获取上传按钮
onMounted(() => {
  let upload = document.querySelector('#upload')

  // 上传文件
  upload.addEventListener("change", (event) => {
    let files = event.target.files, i = 0, len = files.length, startInd = fileList.length, curInd = fileList.length, newFileList = [];
    while (i < len) {
      fileList[curInd++] = files[i]
      newFileList[i] = files[i];
      i++
    }
    fileListWin.value.addLi(newFileList, startInd)
    console.log(fileList);
  })
})

// 点击上传
const uploadFile = function () {
  upload.click()
}


const delFile = function(ind){
  fileList.value.splice(ind, 1)
}

//最终确认真正上传文件
const uploadFileTruly = function(){
  let param = new FormData();
  for(let i = 0; i < fileList.length; i++){
    param.append('file', fileList[i]);
  }
  axios({
    headers: {
      'Content-Type': 'application/w-www-form-urlencoded',
      'Token': userData.Token,
    },
    method: 'POST',
    url: 'http://api.linwine.space/api/sjk/tec/upload/course',
    data: param
  }).then((data) => {
    console.log(data); //查看接口返回的数据
    let fileId = data.data.data.fileId[0]
    console.log(fileId);
    emits('getFileIdList', fileId)
  }, function (data) {
    console.log("错误信息：" + data)
  });
}

//展示文件列表
const dialogVisible = ref(false)
const showFiles = function(){
  dialogVisible.value = true 
}

// 关闭文件列表
const close = function(){
  dialogVisible.value = false
} 

defineExpose({
  uploadFileTruly
})

</script>
<style scoped>
.but {
  width: 112px;
  height: 20px;
  background: url(../../assets/images/teacher/addCourse/upload.svg) no-repeat 12.5% center;
  background-color: #ffffff;
  border-radius: 6px;
  border: solid 1px #707070;
  opacity: 0.6;
  font-family: Source Han Sans CN;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 20px;
  letter-spacing: 0px;
  cursor: pointer;
  color: #707070;
  padding-left: 17.6%;
}

.but img {
  position: absolute;
  left: 14%;
}

.tip {
  font-family: Source Han Sans CN;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 20px;
  letter-spacing: 0px;
  color: #707070;
}

.containList {
  width: 450px;
  height: 300px;
  z-index: 10;
  padding: 10%;
  padding-top: 20%;
  position: absolute;
  top: -252%;
  right: 58%;
  background-color: white;
  display: none;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);

}

.close {
  position: absolute;
  right: 5%;
  z-index: 12;
  top: 4%;
  font-size: 1.2em;
  cursor: pointer;
}

.close:hover {
  color: #c0c0c0;
  transition: 0.2s;
}


.showFile {
  background-color: #ffffff;
  margin-left: 26%;
  border-radius: 6px;
  border: solid 1px #707070;
  opacity: 0.6;
  font-family: Source Han Sans CN;
  cursor: pointer;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  height: 20px;
  letter-spacing: 0px;
  color: #707070;
  box-shadow: 0px 3px 6px 0px rgb(182 119 119 / 16%);
}
</style>
